// 聊天消息记录的气泡
import QtQuick 2.0
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.1

import com.yihu.xchat.enum 1.0
import com.yihu.xchat.util 1.0

Item {
    id: bubble

    property url photo
    property bool floatRight
    property string message
    property string timestamp
    property var messageType
    property int maxWidth

    signal messageDoubleClicked(string content, int contentType)

    anchors.left: parent.left
    anchors.right: parent.right
    anchors.rightMargin: 15

    width: parent.width
    height: Math.max(userPhotoRect.height, messageRect.height)

    // 头像
    Rectangle {
        id: userPhotoRect

        height:32
        width: 32

        radius: width / 2
        clip: true

        Image {
            anchors.fill: parent

            source: photo
        }
    }

    // 消息体
    Rectangle {
        id: messageRect

        anchors.top: bubble.top

        width: parent.width / 4
        radius: 4
        color: "#EEEEEE"

        // 显示具体的消息内容，根据内容类型创建
        Loader { id: messageField }

        // 时间
        Text {
            id: timestampField

            anchors.left: parent.left
            anchors.bottom: parent.bottom
            anchors.margins: 5

            font.pointSize: 10
            text: timestamp
            color: "gray"
        }

        // 当整个消息组件加载加载完成之后，计算各组件需要的宽高度
        Component.onCompleted: {
            //console.debug("messageType:" + messageType, ", message", message);
            if(messageType == X.Text){          // 加载文本显示组件
                messageField.sourceComponent = textMessage;

                messageField.width = Math.min(messageField.contentWidth, maxWidth)
                messageField.height = messageField.contentHeight
            } else if(messageType == X.Image){  // 加载图片显示组件,最宽或最高为150
                messageField.sourceComponent = imageMessage;

                var maxValue = 200;
                if(messageField.implicitWidth > messageField.implicitHeight){
                    if(messageField.implicitWidth > maxValue){
                        messageField.width = maxValue;
                        messageField.height = messageField.implicitHeight * (maxValue / messageField.implicitWidth);
                    }
                } else {
                    if(messageField.implicitHeight > maxValue){
                        messageField.height = maxValue;
                        messageField.width = messageField.implicitWidth * (maxValue / messageField.implicitHeight);
                    }
                }
            } else if(messageType == X.Audio){  // 加载显示声音显示占位符
                messageField.sourceComponent = audioMessage;
                messageField.x = timestampField.width - messageField.width;      // 调整占位图片位置，这个算法可能需要修改
            } else if(messageType == X.Video){  // 加载显示视频显示占位符
                messageField.sourceComponent = videoMessage;
                messageField.x = timestampField.width - messageField.width;      // 调整占位图片位置，这个算法可能需要修改
            } else if(messageType == X.VCard){
                // 加载名称显示占位符
            } else {
                console.error("Unknow message type in chatting widget:" + messageType);
            }

            // 设置汽泡几何属性
            width = Math.max(messageField.width, timestampField.width) + 10
            height = Math.max(messageField.height + timestampField.height + (messageType < X.Audio ? 15 : 6), userPhotoRect.height)
        }

        MouseArea {
            anchors.fill: parent

            // 双击后,向视图发送消息
            onDoubleClicked: {
                //console.debug("bubble.notificationWidget.signals:", bubble.notificationWidget.signals);
                bubble.messageDoubleClicked(bubble.message, bubble.messageType);
            }
        }
    }

    // 项目加载完成后，设置汽泡位置
    Component.onCompleted: {
        if (floatRight) {
            userPhotoRect.anchors.right = bubble.right;
            userPhotoRect.anchors.top = bubble.top;

            messageRect.anchors.right = userPhotoRect.left;
            messageRect.anchors.rightMargin = 5;

            messageRect.color = "#DAF4FD"
        } else {
            userPhotoRect.anchors.left = bubble.left;
            messageRect.anchors.left = userPhotoRect.right;

            messageRect.anchors.leftMargin = 5;
        }
    }

    // 文本消息组件
    Component {
        id: textMessage

        Text {
            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.margins: 5

            font.pointSize: 15
            visible: true

            text: message
        }
    }

    // 图片消息组件
    Component {
        id: imageMessage

        Image {
            source: !FileUtilSingleton.exists(message) ? "qrc:/images/broken_image.png" : message

            anchors.left: parent.left
            anchors.top: parent.top
            anchors.margins: 5
        }
    }

    // 声音消息
    Component {
        id: audioMessage

        Image {
            id: img
            source: "qrc:/images/message.voice.png"

            width: 24
            height: 24

            anchors.top: parent.top

            MouseArea {
                z: 1000
                anchors.fill: parent

                onClicked: {
                    console.info("Play voice file");
                }
            }
        }
    }

    // 视频
    Component {
        id: videoMessage

        Image {
            source: "qrc:/images/message.video.png"

            width: 48
            height: 48

            anchors.top: parent.top

            MouseArea {
                anchors.fill: parent

                onClicked: {
                    console.info("Play video file");
                }
            }
        }
    }

    // 名片,TODO:未完工
    Component {
        id: vcardMessage

        Text {
            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.margins: 5

            font.pointSize: 15
            visible: true

            text: message
        }
    }
}
